﻿{% extends 'base.html' %}

{% block extra_head  %}

{% if not edit %}
<title>添加新文章</title>
{% else %}
<title>修改文章</title>
{% endif %}
<script type="text/javascript" src="/tinymce/tiny_mce.js"></script>
<script type="text/javascript" src="/static/jquery.form.js"></script>
<script type="text/javascript">
    tinyMCE.init({
        theme : "advanced",
        mode : "exact",
        elements : "content",
        /*plugins : "bbcode",*/
        theme_advanced_buttons1 : "bold,italic,underline,undo,redo,link,unlink,image,forecolor,styleselect,removeformat,cleanup,code",
        theme_advanced_buttons2 : "",
        theme_advanced_buttons3 : "",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "center",
        theme_advanced_styles : "Code=codeStyle;Quote=quoteStyle",
        content_css : "css/bbcode.css",
        entity_encoding : "raw",
        add_unload_trigger : false,
        remove_linebreaks : false,
        inline_styles : false,
        convert_fonts_to_spans : false,
        convert_urls : false
    });
    /*tinyMCE.execCommand('mceToggleEditor',false,'content');*/
    //tags = {{archive.tags|join:","}}
    tags = "{%for tag in env_tags%}{{tag.name}},{%endfor%}"
    $(document).ready(function(){
/*
    $('#id_tags').keyup(function(){
        if(this.value.length > 0){
            if(this.value[this.value.length-1] == ','){
                return;
            }
            pre = this.value;
            l = this.value.split(',');
            w=l[l.length-1];
            //alert(w);
            if(tags.search(w)){
                s = tags.substr(tags.search(w))
                slen = s.search(',')
                end = tags.search(w) + slen
                start = tags.substring(0,end).lastIndexOf(',')
                this.value=pre.substring(0,pre.lastIndexOf(',')+1)+tags.substring(start +1,end)
            }
        }
    });
*/
    
    })
</script>
<script type='text/javascript'>
    /*$(document).ready(function(){
        tinyMCE.get('mce_editor_0').selection.setContent('sdf');
    });
        */
    $(document).ready(function(){
            
        $('#upload_image_form').ajaxForm({dataType:'json',success:function(json){
            if( json.success ){
                img = "<img src='" + json.data +"' />"
                tinyMCE.execCommand('mceInsertContent',true,img);
                html = $("<div class='image'><img width='100' src='" + json.data +"'/><a class='insert' href='#'>插入</a></div>")

                html.children('a.insert').click(function(){
                    tinyMCE.execCommand('mceInsertContent',true,img);
                    });
                $('#upload_image').append(html);
                $('#upload_image .error').html('');
            }else{
                $('#upload_image .error').html(json.data)
            }
        }
        })
        
    })
</script>

<style type='text/css'>
    form.model textarea{
        width:80%;
        height:300px;
    }
    #upload_image{
        padding:10px;
        background-color:#DDDDDD;
        margin-right:3em;
    }
    #upload_image img{
        border:5px solid white;
        display:block;
    }
    #upload_image a.insert{
        display:block;
        float:left;
        color:green;
    }
    #upload_image .error{
        color:red;
    }
</style>

{% endblock %}

{% block content %}
{% if not edit %}
<h2> 发布新文章 </h2>
<form class='model' action='/archive' method='POST'>
{% else %}
<h2>修改文章</h2>
<form class='model' action='/archive/{{id}}/edit' method='POST'>
{% endif %}
    {{form.as_p}}
    <input class='submit' type='submit' value='写好啦'></input>
</form>

<h4>上传个图片吧</h4>
<div id='upload_image'>
    <form id='upload_image_form' method='post' action='/upload'	enctype="multipart/form-data">
        <input type='file' name='image'></input>
        <input type='submit' value='上传吧'></input>
        <div class='error'></div>
    </form>
</div>
{% endblock %}
